<script setup>
  import {ref} from 'vue'
  import demo1 from './components/demo1.vue'
  import demo2 from './components/demo2.vue'
  import demo3 from './components/demo3.vue'
  import demo4 from './components/demo4.vue'
  import demo5 from './components/demo5.vue'
  import demo6 from './components/demo6.vue'
  import demo7 from './components/demo7.vue'
  import demo8 from './components/demo8.vue'
  import async from './components/async.vue'

  let data = ref('父组件的数据')

  let fn = (data) =>
  {
    console.log('子组件传递过来数据')
    console.log(data)
  }
</script>

<template>
  <!-- <demo4 :data="data" @test="fn" /> -->
  <!-- <demo5 :prop-c="'hello world'" :prop-f="190" @SubFn="fn" /> -->
  <!-- <demo6 /> -->
   
  <!-- <demo7>
    <h1>定义一个插槽</h1>
    <template slot="temp"></template>

    <h1>在插槽当中传递一些数据</h1>
    <template v-slot:temp="scope">
      <div>{{scope.nickname}}</div>
    </template>
  </demo7> -->

  <demo8 />

  <teleport to="#model">
    <!-- 挂载内容 -->
    <h3>这个是挂载的内容</h3>
  </teleport>

  <h1>异步处理</h1>
  <Suspense>
    <template #default>
      <async></async>
    </template>
    <template #fallback>
      <h2>loading....正在加载中.....</h2>
    </template>
  </Suspense>




</template>
